<!-- 历史任务 -->
<template>
    <div class="history" @scroll="scrollLoad()" ref="review">
        <div class="history-main">
            <div class="history-task">
                <span @click="historyMaskShow=true">历史任务</span>
                <div class="task-date">—&nbsp;&nbsp;{{thisHistory.date}}&nbsp;&nbsp;—</div>
                <h4>{{thisHistory.dayCount}}天打卡任务已完成！</h4>
                <p v-if="type==0">累计参与打卡{{cumulative}}天，继续加油吧！</p> 
                <div class="task-data" v-if="type==1">
                    <p>班级平均累计打卡{{averageDay}}天</p>
                    <p>共发表读书心得{{reviewNum}}篇</p>
                </div>
            </div>
        </div>
        <!-- 心得 -->
        <div class="history-review">
            <div class="module-title">{{type==1?'班级读书心得':'我的读书心得'}}</div>
            <!-- 时间轴列表 -->
            <div class="time-axis">
                <ul class="day-list">
                    <li class="shadow3" v-for="(list,index) in reviewList" :key="index">
                        <div class="day" v-show="list.dateShow">
                            <span>{{list.date}}</span>
                            <i>{{list.month}}月</i>
                        </div>
                        <div class="user-info" v-if="type==1">
                            <img :src="list.avatar ? list.avatar: $parent.headError" :onerror="$parent.headError" alt="">
                            <span>{{list.trueName}}</span>
                        </div>
                        <h4 @click="goReview(list)">关于《{{list.bookName}}》的读后感</h4>
                        <p @click="goReview(list)" v-show="list.experienceContent">{{list.experienceContent}}</p>
                        <div class="review-page clearfix">
                            <span class="left">{{list.pageInterval}}</span>
                            <div :class="['like right',{'islike':list.isPraise}]" @click="likeClick(list,index)">{{list.praiseCount}}</div>
                        </div>
                    </li>
                </ul> 
                <transition name='fade'>
                    <div class="no-con" v-show="noConShow">
                        <img src="@/assets/img/no-con.png" alt="">
                        <p>没有书评...</p>
                    </div>
                </transition> 
                <div class="bottom-tips">{{bottomTip}}</div>   
            </div>
        </div>
        <!-- 选择时间遮罩 -->
        <History v-show="historyMaskShow" :historyMaskShow="historyMaskShow" :choseIndex="choseIndex" @choseFun="choseFun" @pickerClose="historyMaskShow=false" :isLast="isLast" :lastTask="lastTask"></History>
        <!-- 按钮 -->
        <div class="btn-box-main" v-if="hasWrite!=1">
            <div class="btn-blue shadow2" @click="goReturn()">返回</div>
        </div>
        <div class="btn-box-main" v-if="hasWrite==1">
            <div class="btn-finish clearfix">
                <span class="left" @click="goWriting()">写心得</span>
                <span class="right shadow2" @click="goReturn()">返回</span>
            </div>
        </div>
    </div>
</template>

<script>
import { axGet,axPost } from '@/api/index'
import { getTimeStr } from '@/assets/js/base'
import History from '@/components/History'

export default {
    name: "history",
    components:{
        History,
    },
    data(){
        return{ 
            type:this.$parent.myInfo.UserType,  //0学生，1教师
            userid:this.$parent.myInfo.UserId,
            bookid:this.$route.query.bookid,    //书本id
            from:this.$route.query.from,        //考试
            isLast:this.$route.query.isLast,
            hasWrite:this.$route.query.hasWrite, //有写心得按钮
            lastTask:sessionStorage.thisTask ? JSON.parse(sessionStorage.thisTask) : {},     //当前任务对象
            historyList:[],  //历史任务列表
            thisHistory:{},  //显示的任务
            choseHistory:{}, //选择的任务
            choseIndex:0,
            cumulative:0,   //累计打卡天数
            averageDay:0,   //班级平均打卡
            reviewNum:0,    //班级书评
            reviewList:[],
            // 选择器
            historyMaskShow:false,
            choseIndex:0,
            historyIndex:this.$route.query.index,
            resultstr:'',
            slots: [],
            taskDateList:[],
            pcaValue:'',
            // 分页
            noConShow:false,
            listPage:1,
            totalPage:1,
            bottomTip:'',
            isLoading:true,
            
        }
    },
    watch:{
        historyMaskShow(newVal,oldVal){
            if(newVal){
                touchFalse() 
            }else{
                touchTrue()
            }
        },
    },
    created(){ 
        this.$parent.menuShow=false;
        /****** 验证登录 *****/ 
        if(!sessionStorage.getItem("myInfo")){
            this.$router.replace({path:'/',query: {}});
        }else{
            this.historyList=JSON.parse(sessionStorage.getItem("historyList")) 
            if(this.isLast==1){ //学生端当前任务最后一天打卡完成时显示当前任务数据
                this.historyList.unshift(this.lastTask)
            }
            
            if(this.from == 'test'){
                this.choseIndex=this.historyIndex
                this.thisHistory=this.historyList[this.historyIndex]
            }else{
                this.thisHistory=this.historyList[0];
            }
            console.log(this.historyList)
            let createTime=this.thisHistory.createTime.replace( /-/g, '/')
            let date=new Date(createTime)
            let startDate=getTimeStr(date)
            let endDate=getTimeStr(new Date(date.getTime()+1000*60*60*24*(this.thisHistory.dayCount-1)))
            this.thisHistory.date=startDate+'~'+endDate

            if(this.type==0){  //学生
                this.getCumulative()
                this.getMyReview(1)
            }else if(this.type==1){ //教师
                this.getAverageDay()
                this.getReview(1)
            }
            
        }
    },
    mounted(){
    },
    methods:{
        // 去写书评
        goWriting(){
            this.$router.replace({path:'/writing',query: {bookid:this.bookid}});
        },
        goReview(list){
            sessionStorage.setItem("thisReview",JSON.stringify(list))
            this.$router.push({path:'/review',query: {bookid:list.bookid,reviewid:list.experienceId}});
        },
        //请求累计打卡
        getCumulative(){
            axGet('GetTaskDayByUserIdAndTaskId', {
                userId:this.userid,
                taskId:this.thisHistory.taskId,
            }).then(res => {
                if(res.ResultCode==1){
                    this.cumulative=res.Value;
                }
            })
        },
        //请求班级打卡
        getAverageDay(){
            axGet('GetAvgTaskDayByClassCodeAndTaskId', {
                userId:this.userid,
                taskId:this.thisHistory.taskId,
            }).then(res => {
                if(res.ResultCode==1){
                    this.averageDay=Math.ceil(res.Value/60);
                }
            })
        },
        //请求我的书评列表
        getMyReview(page){
            axGet('GetExperienceByuserIdAndTaskId', {
                userId:this.userid,
                taskId:this.thisHistory.taskId,
                pageIndex: page,
                pageSize:10,
            }).then(res => {
                if(res.ResultCode==1){
                    let listJson=res.Value.list;
                    this.addData(listJson)
                    if(page==1){
                        this.totalPage=res.Value.pageCount
                        this.reviewList.length==0 ? this.noConShow=true : this.noConShow=false
                    }
                    if(page<this.totalPage){
                        this.bottomTip='上拉加载更多'
                    }else{
                        this.bottomTip=''
                    }
                    this.isLoading=true;
                }else{
                    this.isLoading=false; 
                }
            })
        },
        //请求书评列表
        getReview(page){
            axGet('GetExperienceByClassCodeAndTaskId', {
                userId:this.userid,
                taskId:this.thisHistory.taskId,
                pageIndex: page,
                pageSize:10,
            }).then(res => {
                if(res.ResultCode==1){
                    let listJson=res.Value.list;
                    this.addData(listJson)
                    if(page==1){
                        this.reviewNum=res.Value.totalRecords
                        this.totalPage=res.Value.pageCount
                        this.reviewList.length==0 ? this.noConShow=true : this.noConShow=false
                    }
                    if(page<this.totalPage){
                        this.bottomTip='上拉加载更多'
                    }else{
                        this.bottomTip=''
                    }
                    this.isLoading=true;
                }else{
                    this.isLoading=false; 
                }
            })
        },
        // 数据组装
        addData(listJson){
            // console.log(listJson)
            listJson.forEach((item,i)=>{
                item.Date=item.createTime.substring(0,10)
                let month=0
                let date=0
                if(item.Date.charAt(5)==0){
                    month=item.Date.substring(6,7)
                }else{
                    month=item.Date.substring(5,7)
                }
                if(item.Date.charAt(8)==0){
                    date=item.Date.substring(9,10)
                }else{
                    date=item.Date.substring(8,10)
                }
                item.month=month;
                item.date=date;
                item.voiceOn=false;
                item.dateShow=true;
                this.reviewList.push(item)
            })
            for(let i=0;i<this.reviewList.length;i++){
                if(i+1<this.reviewList.length){
                    if(this.reviewList[i].Date==this.reviewList[i+1].Date){
                        this.reviewList[i+1].dateShow=false;
                    }
                }else if(this.reviewList.length>1){
                    if(this.reviewList[this.reviewList.length-1].Date==this.reviewList[this.reviewList.length-2].Date){
                        this.reviewList[this.reviewList.length-1].dateShow=false;
                    } 
                }
            }
        },
        // 点赞
        likeClick(item){
            if(item.isPraise){
                this.removePraised(item)
            }else{
                this.addPraised(item)
            }
        },
        addPraised(item){
            axGet('PostPraise', {
                FromUserId: this.userid,
                ToUserId:item.userId,
                PraiseCategory:0,
                PraiseIdentity:item.experienceId, 
            }).then(res => {
                if(res.ResultCode==1){
                    item.isPraise=true;
                    item.praiseCount=parseInt(item.praiseCount)+1; 
                }
            })
        },
        removePraised(item){//取消赞
            axGet('CancelPraise', {
                FromUserId: this.userid,
                ToUserId:item.userId,
                PraiseCategory:0,
                PraiseIdentity:item.experienceId, 
            }).then(res => {
                if(res.ResultCode==1){
                    item.isPraise=false;
                    item.praiseCount=parseInt(item.praiseCount)-1; 
                }
            })
        },
        // 选时间段
        choseFun(item,index){
            if(item.taskCategory==2){
                if(this.type==1){
                    this.$router.replace({path:'/testState',query: {bookid:this.bookid,from:'test',index:index}});
                }else{
                    this.$router.replace({path:'/challengeEnd',query: {bookid:this.bookid,hastest:1,taskid:this.historyList[index].taskId,from:'history'}}); 
                }
            }else{
                if(this.choseIndex==index){
                    this.historyMaskShow=false;
                }else{
                    this.choseIndex=index;
                    this.choseHistory=item;
                    this.historyChose()    
                }    
            }
           
            
        },
        pickerClose(){
            this.historyMaskShow=false;
            // this.choseIndex=this.historyIndex;
            this.choseHistory=this.thisHistory;
        },
        historyChose(){
            // if(this.historyIndex==this.choseIndex){
            //     this.historyMaskShow=false;
            // }else{
            //     this.historyIndex=this.choseIndex;
                this.thisHistory=this.choseHistory;

                this.reviewList=[]
                this.noConShow=false
                this.listPage=1
                this.totalPage=1
                this.bottomTip=''
                this.isLoading=true

                if(this.type==0){  //学生
                    this.cumulative=0   //累计打卡天数
                    this.getCumulative()
                    this.getMyReview(1)
                }else if(this.type==1){ //教师
                    this.averageDay=0   //班级平均打卡
                    this.reviewNum=0    //班级书评
                    this.getAverageDay()
                    this.getReview(1)
                }

                this.historyMaskShow=false;
            // }
        },
        //取消
        returnClick(){
            this.historyMaskShow=false;
        },
        //保存
        saveClick(){ 
            this.historyMaskShow=false; 
        },
        onValuesChange(picker, values) {
           

        },
        goReturn(){
            this.$router.go(-1)
        },
        // 滚动加载   
        scrollLoad(){
            let bodyH = this.$refs['review'].clientHeight;
            let scrollH = this.$refs['review'].scrollTop;
            let listH = this.$refs['review'].scrollHeight;
            // console.log(bodyH,scrollH,listH)
            if(scrollH+bodyH+100>listH && this.isLoading){
                this.isLoading=false
                this.bottomTip='努力加载中...'
                this.listPage=this.listPage+1;
                if(this.listPage<this.totalPage || this.listPage == this.totalPage){
                    let page=this.listPage;
                    if(this.type==0){  //学生
                        this.getMyReview(page)
                    }else if(this.type==1){ //教师
                        this.getReview(page)
                    }
                }else{
                    if(this.reviewList.length>0){
                        this.bottomTip='到达世界的边缘咯...'
                        console.log('没有更多数据')
                    }else{
                        this.bottomTip=''; 
                    } 
                }
            }
        },
        
    }
}
</script>
<style type="text/css" scoped>
.history{
    width: 100%;
    height: 100%;
    overflow: scroll;
}
.history-task{
    text-align: center;
    position: relative;
    padding: 5.06rem 0 1.52rem;
    background: url(~@/assets/img/main/history-bg.png) no-repeat center 0;
    background-size: 4.82rem auto;
}
.history-task span{
    position: absolute;
    top: 0.48rem;
    right: 0.38rem;
    color: #02affe;
    font-size: 0.3rem;
    background: url(~@/assets/img/icon/change-blue.png) no-repeat right 0 center;
    background-size: auto 0.24rem;
    padding-right: 0.38rem;
}
.task-date{
    color: #999;
    font-size: 0.3rem;
    line-height: 1;
}
.history-task h4{
    font-size: 0.48rem;
    font-weight: bold;
    line-height: 1;
    padding: 0.48rem 0 0.36rem;
}
.history-task p{
    font-size: 0.3rem;
    color: #666;
    line-height: 1;
}
.task-data p{
    padding-bottom: 0.2rem;
}
.history-review{
    padding: 0 0.32rem 1.6rem;
}

/* .btn-chose{
    width: 80%;
    height: .8rem;
    line-height: .8rem;
    font-size: 0.3rem;
    background: #02affe;
    color: #fff;
    border-radius: 0.5rem;
    text-align: center;
    margin: 0.2rem auto 0;
}
.picker-toolbar{
    height: 0.9rem;
    border-bottom: 0.01rem solid #e0e0e0;
}
.mint-datetime-action{
    line-height: 0.9rem;
    box-sizing: border-box;
}
.mint-datetime-cancel{
    color:#999;
    text-align: left;
    padding-left: 0.32rem;
}
.mint-datetime-confirm{
    color: #02affe;
    text-align: right;
    padding-right: 0.32rem;
} */
.btn-finish span{
    width: 47.5%;
    height: 0.86rem;
    line-height: 0.86rem;
    border-radius: 0.5rem;
}
.btn-finish .left{
    border: 1px solid #e0e0e0;
    color: #666;
    box-shadow: 0 0.1rem 0.2rem rgba(224,224,224,.3);
    -webkit-box-shadow: 0 0.1rem 0.2rem rgba(224,224,224,.3);
}
.btn-finish .right{
    background: #02affe;
    color: #fff;
    border: 1px solid #02affe;
}
</style>